<template>
  <div class="Sciences">
    <van-nav-bar
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in banner" :key="item.caid">
        <img
          :src="`/${item.img}`"
          width="100%"
          height="210px"
          :style="{ display: 'block' }"
          alt=""
        />
      </van-swipe-item>
    </van-swipe>
    <div>
      <!-- 标题盒子 -->
      <div v-for="item in scenicDetail" :key="item.sid">
        <div class="scenic_box">
          <div class="scenicAll">
            <div class="scenic_soot">
              <div class="scenic_indro">{{ item.title }}</div>
              <div class="scenic_detail">2020年5月2日起-景区实行预约购票</div>
            </div>
            <!-- 开园时间 -->
            <div class="scenic-time">
              <span>开园时间:{{ item.park_time }}</span>
              <van-cell is-link @click="showPopup">预定须知</van-cell>
              <van-popup
                v-model="show"
                closeable
                round
                position="bottom"
                :style="{ height: '30%' }"
              >
                <div class="reserve">
                  <h4>温馨提示 ：</h4>
                  <p>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;各位游客您好！根据疫情防控要求，自2022年5月1日起，需戴口罩，测体温，核验场所码、查看行程卡均为绿码，同时必须持有48小时內的核酸检测阴性报告或核酸采样证明；有中高风险地区旅居史人员完成健康管理方可入园，谢谢您的配合。
                  </p>
                </div>
              </van-popup>
            </div>
            <!-- 地点 -->
            <div class="scenic-place">
              <div>{{ item.park_site }}</div>
              <div>
                <span>地图</span>
              </div>
            </div>
          </div>
        </div>
        <!--公告 文字较短时，通过设置 scrollable 属性开启滚动播放 -->
        <van-notice-bar left-icon="volume-o" scrollable :text="item.notice" />
      </div>

      <!-- 预约票型 -->
      <div class="detailPicBox">
        <h4>可预约</h4>
        <div class="detailPic" v-for="items in detailPic" :key="items.pid">
          <div>
            <div>{{ items.title }}</div>
            <div>无需换票</div>
            <div>掌上西湖提醒您:预定须知</div>
          </div>
          <div>
            <div class="Dprice">
              <span>¥</span><span>{{ items.price }}</span>
            </div>
            <button @click="goCart($event)">预定</button>
          </div>
        </div>
      </div>
      <!-- 预定须知 -->
      <div
        class="details"
        style="height: 200px"
        v-for="item in scenicDetail"
        :key="item.did + 'a'"
      >
        <div v-html="item.details"></div>
      </div>
    </div>
    <!-- 回到顶部 -->
    <van-sticky :offset-top="300">
      <van-icon name="back-top" size="2rem" color="#36d" @click="backTop" />
    </van-sticky>
  </div>
</template>

<script>
import { GetSciencesDetail } from "@/request/api";
import AppSciencesActive from "@/components/AppSciencesActive.vue";
// import bus from "../util/bus";
export default {
  components: { AppSciencesActive },
  data() {
    return {
      show: false,
      // 轮播图数据
      banner: [],
      scenicDetail: [],
      container: null,
      detailPic: [], //预约票型
      detailSciencPic: [], //每个票型参数
    };
  },
  methods: {
    //预定须知
    showPopup() {
      this.show = true;
    },
    // 顶部返回按钮
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {
      Toast("按钮");
    },
    backTop() {
      document.documentElement.scrollTop = 0;
    },
    goCart(e) {
      let a = e.currentTarget.previousElementSibling.lastElementChild.innerText;
      let b =
        e.currentTarget.parentElement.previousElementSibling.firstElementChild
          .innerText;
      // console.log(a, b);
      this.$store.commit("updateBuyPrice", a);
      this.$store.commit("updateBuyTitle", b);

      // console.log("点击的是", val);
      // bus.$emit('name', {a,b})

      // this.$root:是所有组件的跟
      // 在$root中向外发布消息,就可以被所有组件接收
      // 参数1自定义  参数2余参数1名称绑定的信息
      this.$root.$emit("msgName", { a, b });
      this.$router.push("/sciencesDetail/Cart");
    },
  },
  mounted() {
    this.container = this.$refs.container;
  },
  created() {
    // 发送请求,请求这个景点详情;
    GetSciencesDetail({
      d_caid: this.$route.query.sid,
    }).then((res) => {
      // console.log(res.banner);
      this.banner = res.banner;
      this.scenicDetail = res.scenicDetail;
      // console.log(res.scenicDetail);
      this.detailPic = res.detailPic;
      // console.log("********************", res.detailPic);
    });
  },
  beforeDestroy() {
    this.$root.$off("msgName");
    //   // Bus.$off("name");
  },
};
</script>

<style lang="scss">
.detailPicBox {
  padding: 0.8rem;
  background-color: #f5f5f5;

  h4 {
    font-size: 20px !important;
    font-weight: 600;
    padding: 0.8rem 0 !important;
  }
  .detailPic {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #fff;
    background-color: #fff;
    border-radius: 6px;
    margin-top: 10px;
    padding: 10px 6px;
    div:first-child {
      div:first-child {
        font-size: 17px;
        line-height: 1.5rem;
      }
      div:nth-child(2) {
        color: #b3cdf7;
        padding: 8px 0;
      }
      div:last-child {
        color: #ada9a9;
        font-size: 14px;
        text-align: left;
      }
    }
    div:last-child {
      text-align: center;
      flex-basis: 30%;
      flex-shrink: 0;
      .Dprice {
        color: #d01212;
      }
    }
    button {
      color: #fff;
      background-color: #fa4300;
      border-radius: 3rem;
      border: none;
      padding: 5px 10px;
      margin-top: 6px;
    }
  }
}
.Sciences {
  background-color: #fff;
}
.details {
  padding: 0.8rem;

  h4 {
    font-size: 20px !important;
    font-weight: 600;
    padding: 0.8rem 0 !important;
  }
  .hint {
    // text-indent:2em;
    font-size: 18px;
    color: #d01212;
    line-height: 1.8rem;
  }
  .headline {
    line-height: 2.5rem;
  }
  .subtitle {
    text-indent: 1.8em;
    line-height: 1.5rem;
  }
  .intro {
    text-indent: 2em;
    line-height: 1.5rem;
    margin: 1.5rem 0;
  }
  .detailImg {
    width: 100% !important;
  }
}
// 标题盒子样式
.scenic_box {
  background-color: #f5f5f5;
  padding: 0.8rem;
  .scenicAll {
    border-radius: 8px;
    padding: 10px 6px;
    background-color: #fff;
    .scenic_soot {
      .scenic_detail {
        padding-top: 10px;
        color: #ada9a9;
      }
      .scenic_indro {
        font-size: 1.2em;
        font-weight: bolder;
      }
    }

    .scenic-time {
      margin: 1rem 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .van-cell {
        width: 25%;
        padding: 0;
        .van-cell__value {
          font-size: 16px;
          color: #36d;
        }
      }
      .van-popup {
        background-image: url("/public/img/user/wxbg.png");
        background-color: #c2d5f1;
        background-size: cover;
        background-repeat: no-repeat;
        .reserve {
          margin: 20px 35px 0px;
          h4 {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 5px;
            text-align: center;
          }
          p {
            font-size: 16px;
            line-height: 1.5em;
          }
        }
      }
    }
    .scenic-place {
      display: flex;
      align-items: center;
      div:first-child {
        line-height: 1.5rem;
        font-size: 14px;
      }
      div:last-child {
        flex-basis: 40%;
        text-align: center;
        color: #36d;
      }
    }
  }
}
</style>
